{% extends "m2/base_search.html" %}
{% block title %}
    电影详情
{% endblock %}

{% block header %}
    <link rel="stylesheet" href="/static/css/m2/style.css">
    <meta name="HandheldFriendly" content="true">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <script>
        cid = "c_47wrcgg";
        ci = 80;
        val = {"id": 247730};
        window.system = {
            "movieId": "247730",
            "myComment": {}
        };

        window.openPlatform = '';
        window.openPlatformSub = '';
        window.$mtsiFlag = '0';

    </script>
    <link rel="stylesheet" href="/static/css/movie/common.css">
    <link rel="stylesheet" href="/static/css/movie/movie-detail.css">

    <script async="" defer="" charset="utf-8" src="/static/js/movie/web.js"></script>
    <script>
        window.mta && mta('tag', 'page', '/films/-id-')
    </script>
    <style>
        @font-face {
            font-family: stonefont;
            src: url('//vfile.meituan.net/colorstone/34e017925c876b21c2874e3ddb3ca52c3436.eot');
            src: url('//vfile.meituan.net/colorstone/34e017925c876b21c2874e3ddb3ca52c3436.eot?#iefix') format('embedded-opentype'),
            url('//vfile.meituan.net/colorstone/7443b662e67d61642e2b89380322e5172268.woff') format('woff');
        }

        .stonefont {
            font-family: stonefont;
        }
    </style>
    <meta name="lx:autopv" content="off">
    <meta name="lx:appnm" content="movie">
    <meta name="lx:category" content="movie">
{% endblock %}

{% block picker %}
    电影
{% endblock %}

{% block main %}

    <div class="banner">
        <div class="wrapper clearfix">
            <div class="celeInfo-left">
                <div class="avatar-shadow">
                    <img class="avatar" src="{{ url }}" alt="">
                    <div class="movie-ver"><i class="imax2d"></i></div>
                </div>
            </div>
            <div class="celeInfo-right clearfix">
                <div class="movie-brief-container">
                    <h3 class="name">{{ movie_name }}</h3>
                    <ul>
                        <li class="ellipsis">{{ target }}</li>
                        <li class="ellipsis">
                            导演：{{ directors }}
                        </li>
                        <li class="ellipsis">{{ release_date }}年上映</li>
                    </ul>
                </div>
                <div class="action-buyBtn">
                    <div class="action clearfix" id="movie_id" data-val="{{ movie_id }}">
                         <span id="user_id" style="display: none">{{ user_id }}</span>
                        <a class="wish " data-wish="false" data-score="" data-bid="b_gbxqtw6x">
                            <div>
                                <i class="icon wish-icon"></i>
                                <span class="wish-msg" data-act="">点赞</span>
                            </div>
                        </a>
                        <a class="score-btn " data-bid="b_rxxpcgwd">
                            <div>
                                <i class="icon score-btn-icon"></i>
                                <span class="score-btn-msg" data-act="comment-open-click">
                收藏
            </span>
                            </div>
                        </a>
                    </div>
                    <a class="btn buy set_score" href="#">评分</a>
                </div>

                <div class="movie-stats-container">

                    <div class="movie-index">
                        <p class="movie-index-title">豆瓣评分</p>
                        <div class="movie-index-content score normal-score">
              <span class="index-left info-num ">

              </span>
                            <div class="index-right">
                                <div class="star-wrapper">
                                    <div class="star-on" style=""></div>
                                </div>

                            </div>
                        </div>
                    </div>
                <div class="movie-index" style="opacity: {{ opacity }};">
                  <p class="movie-index-title">累计票房</p>
                  <div class="movie-index-content box">
                      <span class="stonefont">{{ box_office }}</span>
                      <span class="unit">亿</span>
                  </div>
                </div>


                </div>

            </div>
            <div class="action-buyBtn" style="margin-left: 300px; opacity: {{ opacity }};"><a class="btn buy" href="{{ buy_url }}">购票</a></div>
        </div>
    </div>


    <div class="container" id="app">
        <div class="main-content-container clearfix">
            <div class="main-content">
                <div class="tab-container">
                    <div class="tab-title-container clearfix">
                        <div class="tab-title active tab-desc-click" data-act="tab-desc-click">介绍</div>
                        <div class="tab-title tab-celebrity-click" data-act="tab-celebrity-click">精选名句</div>
                        <div class="tab-title tab-img-click" data-act="tab-img-click">图集</div>
                    </div>
                    <div class="tab-content-container">
                        <div class="tab-desc tab-content active" data-val="{tabtype:&#39;desc&#39;}">

                            <div class="module">
                                <div class="mod-title">
                                    <h3>剧情简介</h3>
                                </div>
                                <div class="mod-content">
                                    <span class="dra">{{ information }}</span>
                                </div>
                            </div>
                            <div class="module">
                                <div class="mod-title">
                                    <h3>图集</h3>
                                    {#                                    <a class="more" href="#" data-act="all-photo-click">全部</a>#}
                                </div>
                                <div class="mod-content">
                                    <div class="album clearfix" data-act="movie-img-click" id="s1_img"></div>

                                </div>
                            </div>


                            <div class="module">
                                <div class="mod-title">
                                    <h3>热门短评</h3>
                                </div>
                                <div class="mod-content">
                                    <div class="comment-list-container" data-hot="9">
                                        <section class="tent_info">
                                            <div class="textarea one">
                                                <textarea class="text_send" id="text_send"></textarea>
                                                <div class="con_btn btn_send">提交</div>
                                            </div>
                                        </section>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="tab-celebrity tab-content" data-val="{tabtype:&#39;celebrity&#39;}">
                            <div class="celebrity-container">
                                <div class="celebrity-group">
                                    <div class="celebrity-type">
                                        电影名句
                                        <span class="num" id="lines_num"></span>
                                    </div>
                                    <ul class="celebrity-list clearfix" id="movie_lines"></ul>
                                </div>

                            </div>
                        </div>
                        <div class="tab-img tab-content" data-val="{tabtype:&#39;img&#39;}">
                            <ul class="clearfix" id="all_img">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="related">
                <div class="module">
                    <div class="mod-title">
                        <h3>相关电影</h3>
                    </div>
                    <div class="mod-content">
                        <div class="related-movies">
                            <dl class="movie-list" id="other_movies"></dl>

                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div id="comment-form-container" class="jBox-wrapper jBox-Modal jBox-Default"
             style="position: fixed; display: none; opacity: 0; z-index: 10000; left: 50%; top: 50%; margin-left: -285px; margin-top: -235px;">
            <div class="jBox-container">
                <div class="jBox-content" style="width: 550px; height: 450px;">
                    <form id="comment-form" data-val="{{ movie_id }}">
                        <div class="score-msg-container">
                            <div class="score"><span class="num">2</span>分</div>
                            <div class="score-message">超烂啊</div>
                            <div class="no-score">
                                请点击星星评分
                            </div>
                        </div>
                        <div class="score-star-contaienr">
                            <div id="scoremark" class="scoremark scores">
                                <em class="score" id="rating">5.0</em>
                                <span class="star">
       <span class="ystar" style="width:80%"></span>
       <ul>
        <li><a href="javascript:void(0)" data-name="很差" class="one-star">1</a></li>
        <li><a href="javascript:void(0)" data-name="较差" class="two-stars">2</a></li>
        <li><a href="javascript:void(0)" data-name="一般" class="three-stars">3</a></li>
        <li><a href="javascript:void(0)" data-name="较好" class="four-stars">4</a></li>
        <li><a href="javascript:void(0)" data-name="很好" class="five-stars">5</a></li>
       </ul>
      </span>
                                <div style="left: 30px; display: none;" class="tips"></div>
                            </div>

                        </div>
                        <input class="btn " type="button" id="rating_click" value="提交" data-act="comment-submit-click">
                    </form>
                    <div class="close">×</div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block returnTop %}

{% endblock %}

{% block js %}

    <script crossorigin="anonymous" src="#"></script>
    <script>
        $('.index-left').html({{ score }});//电影评分
        $('.star-on').css('width', ({{ score }} * 10 + '%')
        )
        ;//星星
    </script>

    <script>
        //星星评分
        starScore($(".scoremark"));

        function starScore(star) {
            star.find(".star ul li a").mouseenter(function () {
                var txt = $(this).attr("data-name");
                var x = $(this).parent("li").index();
                star.find(".tips").html(txt).css("left", 26 + x * 24).show();
                $(this).parents(".scoremark").find(".score").html(2*(x + 1) + ".0");
            });
            star.find(".star ul li a").mouseleave(function () {
                var x = $(this).parent("li").index();
                $(this).parents(".star").find(".ystar").width((x + 1) * 24);
                $(this).parents(".star").next(".tips").html("").css("left", 0).hide();
            });
        }
    </script>
    <link href="/static/css/movie/evaluate.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/movie/movie_single.js"></script>
    <script type="text/javascript" src="/static/js/picture/comment.js"></script>

{% endblock %}